

import supe from '../super.js';

export default class extends supe {

    render() {
        this.node.html(`
        <h1>学生列表</h1>
        <hr/>
        <table id="stuTable" lay-filter="test"></table>
                    <!-- 表头工具 -->
                    <script type="text/html" id="tableHead">
                              <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除选中行数据</button>
                                <button class="layui-btn layui-btn-sm" lay-event="getData" id="all">查看详细信息</button>
                                <!-- <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
                              </div>
                            </script>
        <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-green" lay-event="detail">详情</a>
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>  
        `)
    }
    handle() {
        //加载layui的table模块
        layui.use(['table', 'layer', 'form'], function () {
            //使用 tabale模块
            var { table, layer, form } = layui;
            let flag;
            //渲染表格
            function rem() {
                flag = false;
                table.render({
                    //数据在哪里渲染
                    elem: '#stuTable'
                    //数据接口
                    , url: '/student/getstu'
                    , page: {//分页
                        limit: 5,//初始页面显示条数
                        limits: [3, 5, 10, 20, 50],//每页显示条数  供用户选择
                    }
                    //修改layui的默认分页参数
                    , request: {
                        pageName: 'curpage' //页码的参数名称，默认：page 默认： 1
                        , limitName: 'pagesize' //每页数据量的参数名，默认：limit：10
                    }
                    //修改layui的数据返回格式
                    , parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": "查询成功", //解析提示文本
                            "count": res.tolNum, //解析数据长度 总条数 
                            "data": res.datas //解析数据列表  需要显示的数据
                        }
                    }
                    , cols: [[
                        //表头 field：对应你返回对象的属性(键名)
                        //title：在表格中显示的列名
                        { type: 'checkbox' },   //取值  checkbox   numbers
                        { field: 'name', title: '姓名' },
                        { field: 'gender', title: '性别' },


                        {
                            toolbar: '#barDemo',  //与行工具栏script标签的id值相匹配
                            title: '操作'
                        },

                    ]],
                    //与表头工具栏的id值相匹配
                    toolbar: '#tableHead',
                });


            }
            rem();//初始渲染

            //  行工具事件       tool实参与table标签的lay-filter="test"相匹配
            table.on('tool(test)', function (obj) {
                if (obj.event == 'edit') {
                    // console.log('编辑', obj);
                    layer.open({
                        type: 2,
                        title: '编辑信息',
                        area: ['500px', '400px'],
                        content: '#/main/stuList/xiu',
                        success: function (layero, index) {
                            //找到它的子窗口
                            var sec = layer.getChildFrame('#content', index); //巧妙的地方在这里哦
                            //为子窗口元素赋值
                            sec.find("input[name=stuname]").val(obj.data.name);
                            sec.find("input[name=stuage]").val(obj.data.age);
                            // console.log(sec.find(`option[value=${obj.data.address}]`).val());
                            // sec.find(`option[value=${obj.data.address}]`).val(obj.data.address)
                            sec.find(`option[value=${obj.data.address}]`).attr("selected", true);


                            /*
                              [...sec.find('#address>option')].forEach(item => {
                                  item.value == obj.data.address ? item.selected = true : '';
                              });
                              [...sec.find("#gender>input")].forEach(item => {
                                  item.value == obj.data.gender ? item.setAttribute('checked', 'checked') : '';
                              }); */
                            form.render();
                        },
                        btn: ['确定', '取消'],
                        yes(index) {
                            var sec = layer.getChildFrame('#content', index); //巧妙的地方在这里哦
                            [...$('#female')][0];
                            let gender = sec.find("#female")[0].checked ? '女' : '男';
                            $.ajax({
                                type: 'put',
                                url: `/student/xiustu/${obj.data._id}`,
                                data: {
                                    name: sec.find("input[name=stuname]").val(),
                                    age: sec.find("input[name=stuage]").val(),
                                    gender,
                                    address: sec.find("#address").val(),
                                },
                                dataType: 'json',
                                success: (data) => {
                                    data ? layer.msg(`修改成功！！！`) : layer.msg(`修改失败！！！`);
                                }
                            })
                            layer.close(index);//关闭弹出层
                            flag ? all() : rem();
                        }
                    });

                }

                //删除
                if (obj.event == 'del') {
                    layer.confirm(`确定删除${obj.data.name}吗`, {
                        btn: ['确定', '取消'],
                        title: '删除',
                        yes(index) {
                            obj.del();  //删除
                            layer.close(index);  //关闭弹出层
                            $.ajax({
                                type: 'delete',
                                url: '/student/removestu',
                                data: { stuId: obj.data._id },
                                dataType: 'json',
                                success: (data) => {
                                    flag ? all() : rem();
                                    layer.msg(data);
                                }
                            })
                        }
                    })
                }
                //查看详情
                if (obj.event == "detail") {
                    layer.open({
                        type: 1,
                        title: '详情',
                        area: ['400px', '200px'],
                        content: `
                        <table class="layui-table">
                          <colgroup>
                            <col width="100">
                            <col width="100">
                            <col>
                          </colgroup>
                          <thead>
                            <tr>
                              <th>姓名</th>
                              <th>年龄</th>
                              <th>性别</th>
                              <th>地址</th>
                            </tr> 
                          </thead>
                          <tbody>
                            <tr>
                              <td>${obj.data.name}</td>
                              <td>${obj.data.age}</td>
                              <td>${obj.data.gender}</td>
                              <td>${obj.data.address}</td>
                            </tr>
                          </tbody>
                        </table>
                        `,
                    })
                }
            })




            //表头事件
            table.on('toolbar(test)', function (obj) {
                let { event, config } = obj;
                //获取被点击的按钮  event与lay-event的值相匹配

                //config对象通过table.checkStatus获取被选中的数据
                //table.checkStatus返回一个对象
                //data是选中的数据，isAll是否全选
                let temp = table.checkStatus(config.id);
                // console.log(temp.data);
                // console.log(temp.isAll);

                if (event == 'getCheckData') {
                    // console.log(event, config.id, temp);
                    let arr = [];
                    temp.data.forEach(item => {
                        arr.push(item._id);
                    })
                    $.ajax({
                        type: 'delete',
                        url: '/student/batchStu/' + JSON.stringify(arr),
                        dataType: 'json',
                        success: (data) => {
                            flag ? all() : rem();
                            layer.msg(data);
                        }
                    })
                }


                //全部详细信息
                if (event == 'getData' && $('#all').text() == '查看详细信息') {
                    all();
                    $('#all').text('隐藏详细信息');
                } else if (event == 'getData' && $('#all').text() == '隐藏详细信息') {
                    rem();
                    $('#all').text('查看详细信息');
                }
            })
            function all() {
                flag = true;
                table.render({
                    //数据在哪里渲染
                    elem: '#stuTable'
                    //数据接口
                    , url: '/student/getstu'
                    , page: {//分页
                        limit: 10,//初始页面显示条数
                        limits: [5, 10, 20, 50],//每页显示条数  供用户选择
                    } //开启分页
                    //修改layui的默认分页参数
                    , request: {
                        pageName: 'curpage' //页码的参数名称，默认：page 默认： 1
                        , limitName: 'pagesize' //每页数据量的参数名，默认：limit：10
                    }
                    //修改layui的数据返回格式
                    , parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": "查询成功", //解析提示文本
                            "count": res.tolNum, //解析数据长度 总条数 
                            "data": res.datas //解析数据列表  需要显示的数据
                        }
                    }
                    , cols: [[
                        //表头 field：对应你返回对象的属性(键名)
                        //title：在表格中显示的列名
                        { type: 'checkbox' }    //取值  checkbox   numbers
                        ,
                        { field: 'name', title: '姓名' }
                        , { field: 'gender', title: '性别' },
                        { field: 'age', title: '年龄' },
                        { field: 'address', title: '地址' },
                        {
                            toolbar: '#barDemo',  //与行工具栏script标签的id值相匹配
                            title: '操作'
                        },
                    ]],
                    //与表头工具栏的id值相匹配
                    toolbar: '#tableHead',
                });
            }

        });



    }
}